<template>
  <div class="page-login">
    <div class="form-box">
      <n-h2 align="center">登录</n-h2>
      <n-form
        ref="formRef"
        label-placement="left"
        label-width="120px"
        :model="model"
        :rules="rules"
      >
        <n-form-item path="userName" label="用户名">
          <n-input v-model:value="model.userName" @keydown.enter.prevent />
        </n-form-item>
        <n-form-item path="password" label="密码">
          <n-input v-model:value="model.password" type="password" @keydown.enter.prevent />
        </n-form-item>
        <n-form-item label="&nbsp;">
          <n-button
            :disabled="model.userName === null || model.password === null"
            type="primary"
            block
            @click="loginHandler"
          >
            登录
          </n-button>
        </n-form-item>
        <n-form-item label="&nbsp;">
          <n-button text block type="primary" @click="toRegister">注册账号</n-button>
        </n-form-item>
      </n-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { FormInst, FormItemRule, FormRules } from 'naive-ui'
import { useMessage } from 'naive-ui'
import { useRouter } from 'vue-router'
import apis from '@renderer/handles/apis'
const router = useRouter()
interface ModelType {
  userName: string | null
  password: string | null
}

const formRef = ref<FormInst | null>(null)
const message = useMessage()
const model = ref<ModelType>({
  userName: null,
  password: null
})
const rules: FormRules = {
  userName: [
    {
      required: true,
      validator(_rule: FormItemRule, value: string) {
        if (!value) {
          return new Error('请输入用户名')
        }
        return true
      },
      trigger: ['input', 'blur']
    }
  ],
  password: [
    {
      required: true,
      validator(_rule: FormItemRule, value: string) {
        if (!value) {
          return new Error('请输入密码')
        }
        return true
      },
      trigger: ['input', 'blur']
    }
  ]
}

const toRegister = () => {
  router.push('/register')
}

async function login(data) {
  const { code, msg } = await apis.postJSON(apis.login, {
    data: data
  })
  if (code === 1) {
    message.success(msg)
    sessionStorage.setItem('token', 'token123456')
    location.href = '/'
  } else {
    message.error(msg)
  }
  console.log(code, msg)
}

function loginHandler(e: MouseEvent) {
  e.preventDefault()
  formRef.value?.validate((errors) => {
    if (!errors) {
      login(model.value)
    } else {
      console.log(errors)
      message.error('验证失败')
    }
  })
}
</script>
<style lang="scss">
.page-login {
  min-height: 100vh;
  color: var(--color-text);
  // background: var(--color-background);
  background-image: url('../assets/wavy-lines.svg');
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
